<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-section">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/image/Kitty.webp.jpg'"></image>
        <view class="info" v-if="hasLogin">
          <text class="nickname">{{userInfo.nickname}}</text>
          <text class="level">黄金会员</text>
        </view>
        <view v-else class="login-btn" @click="navTo('/pages/public/login')">
          <text  @click="navigateToLogin">登录/注册</text>
        </view>
      </view>
      <view class="setting" @click="navTo('/pages/setting/index')">
        <uni-icons type="gear" size="26"></uni-icons>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-section">
      <view class="section-header" @click="navTo('/pages/home/home')">
        <text class="title">我的订单</text>
        <text class="more">查看全部订单</text>
      </view>
      
      <view class="order-status">
        <view class="status-item" v-for="(item, index) in orderStatus" :key="index" @click="navTo(item.path)">
          <uni-icons :type="item.icon" size="30"></uni-icons>
          <text class="num" v-if="item.count > 0">{{item.count}}</text>
          <text class="text">{{item.text}}</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="func-section">
      <view class="func-grid">
        <view class="func-item" v-for="(item, index) in funcList" :key="index" @click="navTo(item.path)">
          <uni-icons :type="item.icon" size="26"></uni-icons>
          <text>{{item.text}}</text>
        </view>
      </view>
    </view>

    <!-- 推广模块 -->
    <view class="promotion-section">
      <view class="promo-item orange">
        <text class="title">邀请好友得优惠</text>
        <text class="subtitle">邀请好友立得50元优惠券</text>
      </view>
      <view class="promo-item blue"  @click="navTo('/pages/relate/relate')">
        <text class="title">官方客服</text>
        <text class="subtitle">有问题随时联系我们</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasLogin: false,
      userInfo: {},
      orderStatus: [
        {icon: 'wallet', text: '待付款', count: 2, path: '/pages/order/list?type=1'},
        {icon: 'cart', text: '待发货', count: 1, path: '/pages/home/home/list1?state=1'},
        {icon: 'paperplane', text: '待收货', count: 3, path: '/pages/order/list?type=3'},
        {icon: 'chat', text: '待评价', count: 2, path: '/pages/order/list?type=4'},
        {icon: 'refreshempty', text: '退换货', path: '/pages/after-sale/list'}
      ],
      funcList: [
        {icon: 'shop', text: '我的优惠券', path: '/pages/coupon/list'},
        {icon: 'location', text: '收货地址', path: '/pages/address/address'},
        {icon: 'star', text: '我的收藏', path: '/pages/favorite/list'},
        {icon: 'phone', text: '联系客服', path: '/pages/relate/relate'},
        {icon: 'help', text: '帮助中心', path: '/pages/relate/relate'},
        {icon: 'info', text: '关于我们', path: '/pages/about/index'},
        {icon: 'gift', text: '积分商城', path: '/pages/points/index'},
        {icon: 'flag', text: '商家入驻', path: '/pages/merchant/entry'}
      ]
    }
  },
  methods: {
	   navigateToLogin() {
	      uni.navigateTo({
	        url: '/pages/login/login/login' // 根据实际路径调整
	      })
	    },
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    }
	// openOrderList({
	// 	uni.$u.route("pages/order/index")
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

// 顶部用户信息模块
.user-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx;
  /* 调整渐变，贴近目标界面色调 */
  background: linear-gradient(90deg, #ffe1f8, #e3f4ff); 
  color: #333; 

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
    }

    .login-btn {
      font-size: 34rpx;
      color: #333; 
    }

    .nickname {
      font-size: 36rpx;
      display: block;
      margin-bottom: 10rpx;
    }

    .level {
      background: rgba(129, 199, 255, 0.2); 
      padding: 6rpx 20rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #666; 
    }
  }
}

// 订单状态模块
.order-section {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;

    .more {
      color: #666;
      font-size: 26rpx;
    }
  }

  .order-status {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;

    .status-item {
      position: relative;
      text-align: center;

      .num {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background: red;
        color: white;
        padding: 0 12rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
      }

      .text {
        display: block;
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
}

// 功能入口模块
.func-section {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;

  .func-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30rpx 0;

    .func-item {
      text-align: center;
      padding: 20rpx 0;

      text {
        display: block;
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
}

// 推广模块（若目标界面无特殊渐变，可简化 ）
.promotion-section {
  margin: 20rpx;

  .promo-item {
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    color: #333; 
    background: linear-gradient(90deg, #e3f4ff,#ffe1f8); 
    border: 1px solid #eee; 

    .title {
      font-size: 34rpx;
      display: block;
      margin-bottom: 10rpx;
    }

    .subtitle {
      font-size: 26rpx;
      opacity: 0.9;
    }
  }
}
</style>